{% extends "_layouts/examples.html" %}
{% block title %}Forms / Help text{% endblock %}

{% block standalone_css %}patterns_forms{% endblock %}

{% block content %}
<form>
  <label for="exampleTextInputHelp">Email address</label>
  <input class="p-form-validation__input" type="email" id="exampleTextInputHelp" placeholder="example@canonical.com" name="exampleTextInputHelp" autocomplete="email" aria-describedby="exampleInputHelpMessage"/>
  <p class="p-form-help-text" id="exampleInputHelpMessage">
    A notification email will be sent to entered email address.
  </p>

  <label class="p-checkbox">
    <input type="checkbox" aria-labelledby="checkboxLabel4" class="p-checkbox__input" aria-describedby="exampleTickHelpMessage">
    <span class="p-checkbox__label" id="checkboxLabel4">I agree to the Terms and Conditions</span>
  </label>
  <p class="p-form-help-text is-tick-element" id="exampleTickHelpMessage">By checking this you confirm that you have read and agree to the Terms and Conditions.</p>
</form>
{% endblock %}
